<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <title>管理员登录页面</title>
    <style>
        .container {
            width: 22% !important;
        }

        .code {
            width: 70% !important;
            display: inline-block !important;
        }

        .get-code {
            margin-left: 8px;
        }
    </style>
</head>
<body>
<!--<script src="https://recaptcha.net/recaptcha/api.js"></script>-->
<link rel="stylesheet" th:href="@{/css/bootstrap-3.3.7.css}">
<script th:src="@{/script/jquery-2.1.1.js}"></script>
<script th:src="@{/script/bootstrap-3.3.7.js}"></script>
<div class="container">
    <form th:action="@{/regist}" method="post" role="form">
        <legend>用户注册</legend>
        <div class="mb-3">
            <label for="mail" class="form-label">用户邮箱：</label>
            <input type="email" placeholder="请输入邮箱" class="form-control input-sm" name="mail" id="mail"/>
        </div>
        <br/>
        <div class="mb-3">
            <input type="email" placeholder="请输入验证码" class="form-control input-sm code" name="code" id="code"/>
            <button type="button" value="获取" class="btn btn-info btn-sm get-code" onclick="setTime(this)">获取验证码
            </button>
        </div>
        <br/>

        <div class="mb-3">
            <label for="password" class="form-label">用户密码：</label>
            <input type="password" placeholder="请输入密码" class="form-control input-sm" name="password"
                   id="password"/>
        </div>
        <br/>
        <!--        <div class="g-recaptcha"-->
        <!--             data-sitekey="6Lfo1VQjAAAAAL4QeAef9T6D4hQF1TL2dXy4oE-U">-->
        <!--        </div><br/>-->
        <input type="submit" value="提交" class="btn btn-block btn-info"/>

    </form>
</div>
<script>
    function setTime(obj) {
        let object = $(obj);
        object.attr('disabled', false);
        let countdown = 60;

        let mail = $("#mail").val();
        console.log(mail)
        fetch(`http://localhost:8080/code?mail=${mail}`, {
            method: 'GET',
        }).then(response => {
                console.log(response)
            }
        )
        setInterval(() => {
                if (countdown === 0) {
                    object.attr('disabled', false);
                    object.html("获取验证码");
                    countdown = 60;
                } else {
                    object.attr('disabled', true);
                    object.html("重新发送(" + countdown + ")");
                    countdown--;
                }
            }
            , 1000)
    }
</script>
</body>
</html>
